<template>
  <div style="padding: 20px">
    <el-row :gutter="20">

      <el-col :span="6" :xs="24">
        <el-card>
          <el-divider content-position="left"><span style="font-size: 17px;font-weight: bolder">输入菜单名称查询</span><span style="margin-left: 10px"><a style="color: #20a0ff;font-weight: bolder" @click="getMenuArrayListHandler">刷新菜单</a></span></el-divider>
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行查询"
          />
          <div class="down-tree">
            <el-tree
              ref="tree"
              class="filter-tree"
              :data="menuDataSource"
              :props="defaultProps"
              node-key="menukey"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card>
          <!--    查询查询部分-->
          <div>
            <el-divider content-position="left"><span style="font-weight: bolder;font-size: 18px">菜单信息详情</span> <a style="color: #20a0ff" @click="setAddModel">新增一个菜单</a></el-divider>
            <!--             菜单信息详情-->
            <el-form ref="modifyForm" label-width="150px" :model="modifyData">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item
                    v-if="!isEdit"
                    label="是否父菜单："
                  >
                    <el-radio-group v-model="isParentMenuFlag" @change="changeSetMenuData">
                      <el-radio
                        :key="0"
                        :label="0"
                        :value="0"
                      >
                        父菜单
                      </el-radio>
                      <el-radio
                        :key="1"
                        :label="1"
                        :value="1"
                      >
                        子菜单
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    v-if="isParentMenuFlag === 1"
                    label="其父菜单："
                    :rules="[
                      { required: true, message: '父菜单必须选择',trigger:'blur,change'}
                    ]"
                  >
                    <el-select v-model="modifyData.parentCode" :disabled="modifyData.parentCode === '0'" :value="currentSelectedParentmenuName" style="position: relative;left: 5px" filterable default-first-option placeholder="请选择父菜单" @change="shouMenuName">
                      <el-option
                        key="0"
                        label=""
                        value=""
                      />
                      <el-option
                        v-for="item in parentDataSource"
                        :key="item.menukey"
                        :label="item.title"
                        :value="item.menukey"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                prop="title"
                label="菜单名称："
                :rules="[
                  { required: true, message: '名称不能为空',trigger:'blur,change'},
                  { min: 2,max:15, message: '长度在2-15个字符之间',trigger:'change'}
                ]"
              >
                <el-input v-model="modifyData.title" clearable size="small" placeholder="请输入菜单名称" />
              </el-form-item>
              <el-form-item
                prop="menuName"
                label="菜单页面路径名称："
                :rules="[
                  { required: true, message: '页面路径名称不能为空',trigger:'blur,change'},
                  { min: 2,max:50, message: '长度在2-50个字符之间',trigger:'change'}
                ]"
              >
                <el-input v-model="modifyData.menuName" clearable size="small" placeholder="请输入页面路径名称" />
              </el-form-item>
              <el-form-item
                prop="url"
                label="菜单页面组件路径："
                :rules="[
                  { required: true, message: '组件路径不能为空',trigger:'blur,change'},
                  { min: 2,max:100, message: '长度在2-100个字符之间',trigger:'change'}
                ]"
              >
                <el-input v-model="modifyData.url" clearable size="small" placeholder="请输入页面组件路径" />
              </el-form-item>
              <el-form-item
                prop="icon"
                label="菜单图标："
                :rules="[
                  { required: true, message: '菜单图标不能为空',trigger:'blur,change'}
                ]"
              >
                <el-input v-model="modifyData.icon" :value="modifyData.icon" clearable size="small" placeholder="点击选择菜单图标" @click.native="showDialogHandler" />
              </el-form-item>
              <el-form-item
                prop="hidden"
                label="是否隐藏该菜单："
                :rules="[
                  { required: true, message: '是否是否隐藏菜单标识不能为空',trigger:'blur,change'}
                ]"
              >
                <el-radio-group v-model="modifyData.hidden">
                  <el-radio
                    :key="0"
                    label="1"
                    value="1"
                  >
                    隐藏
                  </el-radio>
                  <el-radio
                    :key="1"
                    label="0"
                    value="0"
                  >
                    显示
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                prop="isSysFlag"
                label="是否系统菜单："
                :rules="[
                  { required: true, message: '是否系统菜单不能为空',trigger:'blur,change'}
                ]"
              >
                <el-radio-group v-model="modifyData.isSysFlag">
                  <el-radio
                    :key="0"
                    label="1"
                    :value="1"
                  >
                    系统菜单
                  </el-radio>
                  <el-radio
                    :key="1"
                    label="0"
                    :value="0"
                  >
                    额外菜单
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <!--      数据操作按钮-->
              <el-row :gutter="24">
                <div style="padding: 10px">
                  <div style="padding: 10px;display: inline-block" align="right">
                    <el-button-group align="right">
                      <el-button type="primary" icon="el-icon-plus" @click="handleSave">保存</el-button>
                      <el-button type="danger" icon="el-icon-delete" @click="resetForm">重置</el-button>
                    </el-button-group>
                  </div>
                  <div style="padding: 10px;display: inline-block" align="left">
                    <el-button-group align="right">
                      <el-button v-if="isEdit" :disabled="modifyData.isSysFlag === '1'||modifyData.parentCode === '0'" type="danger" plain icon="el-icon-delete" @click="handleDele">删除当前菜单</el-button>
                    </el-button-group>
                  </div>
                </div>

              </el-row>
            </el-form>
          </div>
        </el-card>
        <el-alert
          title="菜单维护注意事项："
          type="info"
          :closable="false"
          show-icon
          style="font-size: 20px"
        />
        <el-alert
          title="1. 系统菜单不可删除，额外菜单可以删除。"
          type="info"
          :closable="false"
        />
        <el-alert
          title="2. 系统菜单不可设置成额外菜单。"
          type="info"
          :closable="false"
        />
        <el-alert
          title="3. 新增菜单‘其父菜单’不可选择时，请再次点击‘新增一个菜单’确认新增模式。"
          type="info"
          :closable="false"
        />
        <el-alert
          title="4. 新增菜单时，请给当前用户角色赋予访问该菜单权限才能看到该菜单。"
          type="info"
          :closable="false"
        />
        <el-alert
          title="5. 暂时不支持删除主菜单。"
          type="info"
          :closable="false"
        />
        <el-alert
          title="6. 菜单不能访问，请确认好是否正确组件路径。"
          type="info"
          :closable="false"
        />
      </el-col>
    </el-row>
    <el-dialog :visible.sync="showDialogFlag">
      <el-row :gutter="24">
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-s-tools" /></div>
            <div>el-icon-s-tools</div>
            <div><el-button type="info" @click="setIconByType('el-icon-s-tools')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-setting" /></div>
            <div>el-icon-setting</div>
            <div><el-button type="info" @click="setIconByType('el-icon-setting')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-user-solid" /></div>
            <div>el-icon-user-solid</div>
            <div><el-button type="info" @click="setIconByType('el-icon-user-solid')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-goods" /></div>
            <div>el-icon-goods</div>
            <div><el-button type="info" @click="setIconByType('el-icon-goods')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-s-data" /></div>
            <div>el-icon-s-data</div>
            <div><el-button type="info" @click="setIconByType('el-icon-s-data')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-pie-chart" /></div>
            <div>el-icon-pie-chart</div>
            <div><el-button type="info" @click="setIconByType('el-icon-pie-chart')">选择</el-button></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-cpu" /></div>
            <div>el-icon-cpu</div>
            <div><el-button type="info" @click="setIconByType('el-icon-cpu')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-chat-dot-square" /></div>
            <div>el-icon-chat-dot-square</div>
            <div><el-button type="info" @click="setIconByType('el-icon-chat-dot-square')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-place" /></div>
            <div>el-icon-place</div>
            <div><el-button type="info" @click="setIconByType('el-icon-place')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-lock" /></div>
            <div>el-icon-lock</div>
            <div><el-button type="info" @click="setIconByType('el-icon-lock')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-sunny" /></div>
            <div>el-icon-sunny</div>
            <div><el-button type="info" @click="setIconByType('el-icon-sunny')">选择</el-button></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="text-align: center">
            <div style="font-size: 50px"><i class="el-icon-brush" /></div>
            <div>el-icon-brush</div>
            <div><el-button type="info" @click="setIconByType('el-icon-brush')">选择</el-button></div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<style scoped>
.down-tree{
  height: 650px;
  display: block;
  overflow-y: scroll;
}
</style>
<script>
import { dropBatchMenusinfo, getAllMenusData, modifyOneMenusInfo } from '@/api/menu'

const { Message } = require('element-ui')
const { getOneMenusInfo, addOneMenusInfo } = require('@/api/menu')
export default {
  name: 'Index',
  inject: ['reload'],
  data() {
    return {
      filterText: '',
      isEdit: false, // 是否编辑状态
      showDialogFlag: false, // 是否暂时对话框
      menuDataSource: [], // 信息列表
      parentDataSource: [], // 父节点信息列表
      currentSelectedParentmenuName: '', // 目前选中的父节点名称
      dataTotals: 0, // 查询总条数
      isParentMenuFlag: '', // 新增对象是否父节点
      modifyData: {}, // 待修改对象信息
      modifyMenuCode: '', // 查询的菜单信息编号
      loading: false, // 数据加载状态标识
      searchloding: false, // 搜索按钮加载
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getMenuArrayListHandler() // 获取所有菜单数据
  },
  methods: {
    showDialogHandler() {
      this.showDialogFlag = true
    },
    shouMenuName(val) {
      this.currentSelectedParentmenuName = val
    },
    changeSetMenuData() {
      // 是否父节点选项变化时判断赋值
      if (this.isParentMenuFlag !== 0) {
        // 获取父节点数据并赋值
        const allArray = this.menuDataSource
        const parentArray = []
        allArray.filter(item => {
          console.log(item)
          if (item.mainkey === '0') {
            parentArray.push(item)
          }
        })
        this.parentDataSource = parentArray
        return
      }
      // 父节点
      this.modifyData.parentCode = '0'
    },
    checkElement(index, row) {
      this.$emit('getSelectedVillageInfoId', row)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    getMenuArrayListHandler() {
      this.getMenuArrayList()
    },
    async getMenuArrayList() {
      const res = await getAllMenusData()
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.menuDataSource = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    getOneMenuInfoHandler() {
      this.getOneMenuInfo()
    },
    async getOneMenuInfo() {
      const res = await getOneMenusInfo(this.modifyMenuCode)
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.modifyData = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    setAddModel() {
      this.isEdit = false
      this.modifyData = {}
    },
    handleNodeClick(clickobj, Node, Tree) {
      // 点击父节点赋值用于添加其子节点时的数据
      if (clickobj.children.length !== 0) { this.currentShowParentCode = clickobj.menukey }
      // 点击子节点进行逻辑操作
      this.modifyMenuCode = clickobj.menukey
      this.isEdit = true
      this.getOneMenuInfoHandler()
    },
    handleSave() {
      this.$refs['modifyForm'].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            // 修改
            this.modifyMenuInfoHandler()
            return
          } else {
            // 新增
            this.addMenuInfoHandler()
          }
        }
      })
    },
    resetForm() {
      this.$refs['modifyForm'].resetFields()
    },
    handleDele() {
      this.$confirm('是否删除该菜单，可能导致页面不能访问？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '放弃'
      })
        .then(() => {
          // 调用删除处理器
          this.dropOneMenuInfoHandler()
        })
        .catch(action => {
          // 取消

        })
    },
    dropOneMenuInfoHandler() {
      const IdArray = []
      IdArray.push(this.modifyData.menuCode)
      this.dropOneMenuInfo(IdArray)
    },
    async dropOneMenuInfo(array) {
      const res = await dropBatchMenusinfo(array)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
        window.location.reload()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    addMenuInfoHandler() {
      this.addOneMenuInfo()
    },
    async addOneMenuInfo() {
      const res = await addOneMenusInfo(this.modifyData)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'success',
          type: 'success',
          duration: 2 * 1000
        })
        // this.getMenuArrayListHandler()
        window.location.reload()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    modifyMenuInfoHandler() {
      this.modifyMenuInfos()
    },
    async modifyMenuInfos() {
      const res = await modifyOneMenusInfo(this.modifyData)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'success',
          type: 'success',
          duration: 2 * 1000
        })
        // this.getMenuArrayListHandler()
        window.location.reload()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    setIconByType(type) {
      this.modifyData.icon = type
      this.showDialogFlag = false
      Message({
        message: '设置成功' || 'success',
        type: 'success',
        duration: 2 * 1000
      })
    }
  }
}
</script>
